<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Command Manager</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/modernizr-2.0.6-development-only.js")" type="text/javascript"></script>
    <meta name="viewport" content="width=device-width" />
    <!--Theme-->
    <link href="http://cdn.wijmo.com/themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" title="rocket-jqueryui" />
 
    <!--Wijmo Widgets CSS-->
    <link href="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.0.0.min.css" rel="stylesheet" type="text/css" />
 
    <!--Wijmo Widgets JavaScript-->
    <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.2.0.0.min.js" type="text/javascript"></script>
    <script src="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.0.0.min.js" type="text/javascript"></script>
    <style type="text/css">
        .wijmo-wijgrid
        {
            min-height: 100px;
        }
    </style>

    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            
            var baseUrl = "@Request.Url.AbsoluteUri";
            var commMgrUrl = baseUrl + "/api/Commands";
            // remote
            $("#commGrid").wijgrid({
                selectionMode: "singleRow",
                columns: [{headerText: "Name"},{headerText: "Descr"}],
                data: new wijdatasource({
                    proxy: new wijhttpproxy({
                        url: commMgrUrl,
                        dataType: "json",
                        data: {
                            featureClass: "P",
                            style: "full",
                            maxRows: 10
                        }
                    }),
                    reader: new wijarrayreader([
                     { name: "Name", mapping: "Name" },
                     { name: "Descr", mapping: "Descr" }
                  ])
                })
            });

            $("#deleteButton").click(deleteCommand);
            $("#addButton").click(addCommand);

            function deleteCommand() {
                var sr = $("#commGrid").wijgrid("selection").selectedCells();
                var cell = sr.item(0);
                var cellVal = cell.value();
                var delUrl = commMgrUrl + "/" + cellVal;
                $.ajax({
                    url: delUrl,
                    type: 'DELETE',
                    success: function (data) {
                        var $obj = $("#commGrid"),
                            d = $obj.wijgrid("data");
                        d.splice(cell.rowIndex(),1);
                        $obj.wijgrid("ensureControl", true);
                    }
                });
            }

            function addCommand() {
                $('#addDialog').wijdialog("open");
            }

            $('#addDialog').wijdialog({
                autoOpen: false,
                buttons: [{ text: 'OK', click: saveCommand }, { text: 'Cancel', click: function () { $('#addDialog').wijdialog("close"); } }],
                modal: true,
                width: 400,
                captionButtons: {
                    refresh: { visible: false }
                }
            });

            function saveCommand() {
                var Command = {};
                Command.Name = $("#commName").val();
                Command.Descr = $("#commDescr").val();
                $('#addDialog').wijdialog("close");
                $.ajax({
                    url: commMgrUrl,
                    type: 'POST',
                    data: Command,
                    success: function (data) {
                        var $obj = $("#commGrid"),
                            d = $obj.wijgrid("data");
                        d.push(Command);
                        $obj.wijgrid("ensureControl", true);
                    }
                });
            }

        });
    </script>

</head>
<body>
    <header>
        <div class="content-wrapper">       
            <div class="float-left">
                <p class="site-title"><a href="/">Command Manager</a></p>
            </div>
        </div>
    </header>
    <div id="body">
        <section class="featured">
            <div class="content-wrapper">
                <hgroup class="title">
                    <h1>Welcome to Command Manager</h1>
                    <h2>With Command Manager you can define the commands that your voice application will recognize</h2>
                </hgroup>
                <p>
                    You can add and remove commands from the list below. 
                </p>
             </div>
        </section>
        <section class="content-wrapper main-content clear-fix">
            <h3>Commands:</h3>
            <div>
            <table id="commGrid">
            </table>
            <input id="deleteButton" type="button" value="Delete"/>&nbsp;&nbsp;<input id="addButton" type="button" value="Add" />
            </div>

            <div id="addDialog" title="Add Command">
                Command: <input id="commName" type="text" /><br />
                Descriptions: <input id="commDescr" type="text" /><br />
            </div>

 
@*            <section class="features">
                <section class="feature">
                    <img src="@Url.Content("~/Images/aspNetHome.png")" alt="ASP.NET Home" />
                    <h3>Home of ASP.NET</h3>
                    <p>
                        ASP.NET is a free, fully supported Web application framework that helps you create standards-based web solutions. 
                        Whether you're new to ASP.NET or an experienced developer, the <a href="http://asp.net">ASP.NET website</a> 
                        is your source for news, training, downloads, and support.
                    </p>
                </section>
                <section class="feature">
                    <img src="@Url.Content("~/Images/NuGetGallery.png")" alt="NuGet Gallery" />
                    <h3>NuGet Gallery</h3>
                    <p>
                        NuGet is a Visual Studio extension that makes it easy to install and update open source libraries and tools in 
                        Visual Studio. To see available packages, visit the <a href="http://nuget.org">NuGet gallery</a>.
                        You can also develop your own package and share it in the gallery.
                    </p>
                </section>
                <section class="feature">
                    <img src="@Url.Content("~/Images/findHosting.png")" alt="Find Hosting" />
                    <h3>Find Web Hosting</h3>
                    <p>
                        You can easily find a web hosting company that offers the right mix of features and price for your applications. 
                        Visit <a href="http://microsoft.com/web/hosting" title="Microsoft/Web Website">Microsoft.com/web</a> to 
                        explore offerings from many providers.
                    </p>
                </section>
            </section>
*@        </section>
    </div>
</body>
</html>
